<template>
	<!-- 快捷操作部分 -->
	<view class="content">
		<!-- 标签列表 -->
		<view
			class="tag"
			v-bind:key="index"
			v-for="(item, index) in my_tag_list"
			@click.stop="tag_click()"
		>
			<u-tag
				class="tag-item"
				size="mini"
				:type="item.type"
				:text="item.value"
				mode="light"
			/>
		</view>

		<!-- 如果一个标签没有，则显示添加标签的图标 -->
		<view
			class="tag"
			@click.stop="tag_click"
			v-if="!caseObj.tags || caseObj.tags.length <= 0"
		>
			<u-icon name="tags" size="38" color="#2979ff"></u-icon
		></view>

		<!-- 标签弹出框 -->
		<u-popup
			v-model="show_tag_dialog"
			mode="center"
			:closeable="true"
			:borderRadius="24"
		>
			<biz-tag-dialog
				:caseObj="caseObj"
				@on_tag_add="on_tag_add"
				@on_tag_remove="on_tag_remove"
			></biz-tag-dialog>
		</u-popup>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
import _ from "lodash";

export default {
	props: {
		caseObj: {
			type: Object,
			default: {},
		},
		tagAlign: {
			type: "left" | "right",
			default: "left",
		},
	},
	data() {
		return {
			show_tag_dialog: false,
		};
	},
	computed: {
		my_tag_list: function () {
			return this.caseObj.tags;
		},
	},
	methods: {
		tag_click() {
			this.show_tag_dialog = true;
		},

		on_tag_remove(index) {
			let tags = this.caseObj.tags;

			let newArray = _.remove(tags, (value, remove_index) => {
				return remove_index != index;
			});

			var caseId = this.caseObj._id["$oid"];
			this.$store.dispatch("mainpage/update_tag_by_case_id", {
				payload: {
					caseId: caseId,
					tags: newArray,
				},
			});

			this.caseObj.tags = newArray;
		},
		on_tag_add(tag, tag_item) {
			var caseId = this.caseObj._id["$oid"];
			let tags = this.caseObj.tags;
			tags.push({
				type: tag.theme,
				value: tag_item,
			});
			this.$store.dispatch("mainpage/update_tag_by_case_id", {
				payload: {
					caseId: caseId,
					tags: tags,
				},
			});
			this.caseObj.tags = tags;
		},
	},
};
</script>

<style scoped lang="scss">
.content {
	cursor: hand;
	margin-bottom: -3rpx;
	display: flex;
	flex-direction: row;
	line-height: 1em;
	flex-wrap: wrap;

	.tag {
		margin-right: 4rpx;
		color: #d3d2d2;
	}

	.tag :hover {
		color: #0088f8;
		box-shadow: 2rpx 2rpx 2rpx #cfcfcf;
		cursor: pointer;
	}

	.tag-item {
		padding: 3rpx 2rpx 2rpx 5rpx;
	}

	.tag-item :hover {
		color: #0088f8;
		box-shadow: 2rpx 2rpx 2rpx #cfcfcf;
		cursor: pointer;
	}
}
</style>
